<template>
	<view class="side-tools">
		<view class="side-tools_fix" :class="{'move' : scrollTop > top}">
			<!-- #ifdef H5 -->
			<view class="side-tools_item back" v-if="backShow" @click="navigateBack">
				<m-icon :name="backIcon" size="38rpx"></m-icon>
			</view>
			<!-- #endif -->
			<slot name="items"></slot>
		</view>
		<view class="side-tools_fix">
			<u-transition mode="fade-up" :show="scrollTop > top">
				<view class="side-tools_item top" @click="$util.pageScrollTo(0)">
					<m-icon name="rocket-line" color="#555" size="38rpx"></m-icon>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	export default {
		name:"side-tools",
		props: {
			'scrollTop':{
				type: Number,
				default: 0,
				required: true,
				validator: function(value) {
					return value >= 0
				}
			},
			'backShow':{
				default:true
			},
			'top':{
				default: 150,
			}
		},
		data() {
			return {
				backIcon:'arrow-go-back-line'
			};
		},
		methods: {
			navigateBack(){
				const pages = getCurrentPages(); 
				if (pages.length >= 2) {  
					uni.navigateBack();
				} else { //如果没有上一页返回首页
					uni.switchTab({
						url: '/pages/index/index',
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.side-tools{
		position: fixed;
		z-index: 10;
		// #ifdef APP-PLUS
		bottom: 30rpx;
		// #endif
		// #ifdef H5
		bottom: 30rpx;
		// #endif
		right: 50rpx;
		transition: all .3s;
		&_fix{
			right: 0;
			position: absolute;
			transition: bottom .3s;
			bottom: 0;
			z-index: 2;
		}
		&_fix.move{
			bottom: 100rpx;
		}
		/deep/ &_item{
			// position: absolute;
			border-radius: 25px;
			background-color: #fff;
			box-shadow: 0 0 5px #00000010;
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			margin-bottom: 20rpx;
			transition: bottom .3s;
			// bottom: 0;
			// right: 0;
		}
		&_item.back{
			color: #fff;
			background-color: rgba(0, 0, 0, .6);
		}
		&_item.top{
			z-index: 1;
			background-color: #ffd426;
		}
		// &_item.mark.move{
		// 	bottom: 100rpx;
		// }

	}
</style>